import React from 'react';
import {Button, Tools, Icon, List} from 'weaver-mobile';
import {observer} from 'mobx-react';
import {withRouter} from 'react-router-dom';
import {toJS} from 'mobx';
import {RouteLayout, ShareAuth} from 'weaver-mobile-page';
const getLabel = Tools.getLabel;
const ButtonGroup = RouteLayout.ButtonGroup;

@withRouter
@observer
class Share extends React.Component {
  componentDidMount() {
    const {store} = this.props;
    store.initShare();
  }
  componentWillUnmount(){
    this.props.unmount && this.props.unmount();
  }
  render() {
    const {store} = this.props,
      { shareCanAdd, shareCanDelete, shareTypeStore, shareCondition} = store;
    let defaultShareList = toJS(store.defaultShareList), nonDefaultShareList = toJS(store.nonDefaultShareList);
    return (
      <div className="wea-system-doc-whitebg wm-route-layout">
        <div className="wea-system-doc-share-page">
          {shareCanAdd && shareCondition &&
            <div className="wea-system-doc-share-page-add">
              <ShareAuth
                customType={{
                  skipEntry: true,
                  conditionData: toJS(shareCondition),
                }}
                store={shareTypeStore}
                label={getLabel(15582, '添加条件')}
                placeholder=""
                onChange={store.addShare}
                onConfirm={(data) => {
                  console.log('custom confirm', data);
                }}
              >
                <Button icon="blog-shenqingguanzhu">{getLabel(15582, '添加条件')}</Button>
              </ShareAuth>
            </div>
          }
          <div className="wea-system-doc-share-list">
            <div className="doc-share-title">{getLabel(15059, '默认共享')}</div>
            {Array.isArray(defaultShareList) && defaultShareList.length > 0 ? defaultShareList.map((item) => (
              <List.Item onClick={() => {}} key={item.shareId}>
                <div className="doc-share-item">
                  {shareCanDelete &&
                    <Icon className="doc-share-item-img" type="delete-o" color="red"
                          onClick={() => store.delShare(item.shareId)}/>
                  }
                  <div className="doc-share-item-content">
                    <div className="doc-share-item-title">{item.shareName}</div>
                    <div className="doc-share-item-sub">
                      {item.shareRealName && <span className="doc-share-item-sub-username">{item.shareRealName}</span>}
                      <span>{item.shareRealLevel}</span>
                    </div>
                  </div>
                </div>
              </List.Item>
            )):
              <div className="wea-doc-error">
                <Icon type="no-data" size="lg"/>
                <div>{getLabel(83553, "暂无数据")}</div>
              </div>
            }
          </div>
          <div className="wea-system-doc-share-list">
            <div className="doc-share-title">{getLabel(18574, '非默认共享')}</div>
            {Array.isArray(nonDefaultShareList) && nonDefaultShareList.length > 0 ? nonDefaultShareList.map((item) => (
              <List.Item onClick={() => {}}>
                <div className="doc-share-item" key={item.shareId}>
                  {shareCanDelete &&
                    <Icon className="doc-share-item-img" type="delete-o" color="red"
                        onClick={() => store.delShare(item.shareId)}/>
                  }
                  <div className="doc-share-item-content">
                    <div className="doc-share-item-title">{item.shareName}</div>
                    <div className="doc-share-item-sub">{item.shareRealName}</div>
                  </div>
                </div>
              </List.Item>
            )):
              <div className="wea-doc-error">
                <Icon type="no-data" size="lg"/>
                <div>{getLabel(83553, "暂无数据")}</div>
              </div>
            }
          </div>
        </div>
        <ButtonGroup data={[{
            key: 'submit',
            text: getLabel(826, "确定"),
            onClick: () => {store.afterSave(this.props.history)},
            type: 'primary',
          }]}/>
      </div>
    );
  }
}

export default Share;